<template>
    <div class="commonHeader">
        <div class="left">
            <div class="date">
                <span class="white_color">{{ nowDate }}</span>
                <span class="blue_color">十月二十</span>
            </div>
            <div class="line"></div>
            <div class="date time">
                <span class="white_color">{{ nowTime }}</span>
                <span class="blue_color">{{ weekDay }}</span>
            </div>
            <div class="line"></div>
            <div class="weather white_color">
                <img class="cloudy" src="@/assets/images/common/cloudy.png" alt="">
                <span>20℃</span>
                <div class="early_warning">
                    <img class="typhoon" src="@/assets/images/common/typhoon.png" alt="">
                    <span>台风预警</span>
                </div>
            </div>
        </div>
        <div class="center" @click="backHome">
            <img class="logo" src="@/assets/images/common/LOGO.png" alt="">
        </div>

        <div class="right">
            <div class="content msg">
                <img src="@/assets/images/common/top_msg.png" alt="">
            </div>
            <div class="content user">
                <img src="@/assets/images/common/top_user.png" alt="">
            </div>
            <div class="content logout">
                <img @click="logOut" src="@/assets/images/common/top_logout.png" alt="">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月份从0开始，所以要加1
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

const nowDate = ref() //当前日期
const nowTime = ref() //当前时间
nowDate.value = `${year}-${month}-${day}`
nowTime.value = `${hours}:${minutes}:${seconds}`

// 创建日期对象（注意月份要减去1）
const date = new Date(year, month - 1, day);

// 获取星期几 (0 = 星期日, 1 = 星期一, ..., 6 = 星期六)
const dayIndex = date.getDay();

// 定义星期几的中文名称
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weekDay = weekDays[dayIndex];
//返回首页
const router = useRouter();
const backHome = ()=>{
    router.push("/home");
    
}

const logOut = () => {;
    // 清除所有 localStorage 数据
    localStorage.clear();

    // 清除所有 sessionStorage 数据
    sessionStorage.clear();
    router.push("/login")

}

</script>

<style lang="scss" scoped>
.commonHeader {
    width: 100%;
    height: vh(70);
    position: absolute;
    left: 0;
    top: 0;
    background: url(../assets/images/common/top_bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: 999;

    .left {
        position: absolute;
        left: 0;
        top: 0;
        height: vh(36);
        // line-height: vh(36);
        width: vw(600);
        display: flex;
        font-size: vh(12);

        .white_color {
            color: #fff;
            font-family: DIN;
        }

        .blue_color {
            color: #00B2E3;
            font-family: Source Han Sans CN;
        }

        .date {
            width: vh(110);
            padding-left: vh(14);
            display: flex;
            flex-direction: column;
            line-height: vh(12);
            justify-content: center;
        }

        .line {
            width: vh(1);
            height: vh(26);
            margin-top: vh(5);
            background-color: #fff;
        }

        .time {
            width: vh(93);
            padding-left: vh(19);
        }

        .weather {
            display: flex;
            align-items: center;
            font-size: vh(16);

            .cloudy {
                height: vh(26);
                width: auto;
                margin-left: vh(20);
                margin-right: vh(11);
            }

            .early_warning {
                width: vh(81);
                height: vh(22);
                border-radius: vh(4);
                background: url(../assets/images/common/early_warning.png);
                background-size: 100% 100%;
                margin-left: vh(23);
                display: flex;
                align-items: center;
                font-size: vh(13);

                .typhoon {
                    width: vh(13);
                    height: vh(15);
                    margin-left: vh(6);
                    margin-right: vh(3);
                }
            }
        }
    }

    .center {
        height: vh(70);
        // width: vw(398);
        width: vw(398);
        display: flex;
        align-items: center;
        position: absolute;
        cursor: pointer;
        left: 50%;
            // top: vw(15);
            transform: translate(-10.36458vw, 0);

        .logo {
            // height: vw(42);
            width: vw(398);
            height: auto;
         
          
            // transform: translate(-18.4259vh, 0);

        }
    }


    .right {
        position: absolute;
        right: 0;
        top: 0;
        height: vh(36);
        width: vw(600);
        display: flex;
        display: flex;
        justify-content: flex-end;
        padding-right: vh(22);

        .content {
            display: flex;
            align-items: center;

            img {
                height: vh(20);
                cursor: pointer;
            }
        }

        .user {
            margin-right: vh(38);
            margin-left: vh(39);
            align-items: center;
        }
    }
}
</style>
